<template>
  <div class="member-rating">
    <!-- 头部 -->
    <header>
      <img src="../../../../static/images/touxiang.png" class="member-img">
      <div class="member-level">执行会长</div>
      <div class="member-limit">2019年10月06日到期</div>
    </header>
    <!-- 头部 end -->
    <div class="member-tit">请选择您要升级的会员级别</div>
    
    <!-- 等级列 -->
    <div class="level-list">
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
      <div class="level-item">
        <div class="level-item-name">会员名称</div>
        <div class="level-item-standard">会员标准：25万/届</div>
      </div>
    </div>
    <!-- 等级列 end -->

    <div class="upgrade">立即升级</div>
  </div>
</template>

<script>
export default {
  name:'memberRating'
}
</script>

<style lang="scss" scoped>
  .member-rating{
    width: calc(100% - 20px);
    margin-left:10px;
  }
  //头部
  header{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    .member-img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    &>div{
      width: 100%;
      margin-top:10px;
    }
  }

  //等级列表
  .member-tit{
    font-weight: 700;
    width: 100%;
    font-size: 20px;
    text-align: center;
    margin:30px 0 20px;
  }
  .level-list{
    padding-bottom: 40px;
    .level-item{
      border:1px solid #eee;
      border-radius: 10px;
      margin-bottom: 10px;
      padding:10px;
      .level-item-name{
        font-size: 18px;
        margin-bottom: 20px;
      }
      .level-item-standard{
        color:red;
      }
    }
  }

  .upgrade{
    width: calc(100vw - 20px);
    position: fixed;
    bottom:0;
    margin-left: 2.5px;
    background: red;
    color:#fff;
    text-align: center;
    border-radius: 5px;
    padding:10px 0;
  }
</style>